/**
 * 折叠表格
 * author Forjune
 * @param {}
 */
import React, { useState } from 'react'
import { Table, Icon } from 'antd'
import Paging from '../paging'
import './index.styl'

export default function FoldTable({ tableInfo, tableColumns, handleChangePage }) {
  const [fold, setfold] = useState(true)
  // 页码
  tableColumns[0].render = (text,record,index) => {
    return <span>{tableInfo.current && (tableInfo.current - 1) * 5 + (index + 1)}</span>
  }
  tableColumns[3].render = (text,record,index) => {
    return <span>{record.result === 0? (record.resultName || record.resultStr + '：' + record.failReason) : (record.resultName || record.resultStr) }</span>
  }
  const handlePageChange = (page) => {
    handleChangePage(page)
  }
  function handleTable() {
    setfold(!fold)
  }
  return (
    <div className="foldTable">
      <Table
        columns={tableColumns}
        dataSource={fold ? tableInfo.records.slice(0, 1) : tableInfo.records}
        pagination={false}
        className="self-table"
        bordered={true}
        rowKey={record => record.id}
      />
      {/* 表格数据超过5条才会显示分页器 */}
      {
        tableInfo.total && tableInfo.total > 5 ?
          (
            <div className='foldTable-footer'
              style={{ display: fold ? "none" : "block" }}
            // 这里只能用样式控制显示隐藏 要不然会导致Paging组件销毁 页码不对
            >
              <Paging
                total={tableInfo.total && tableInfo.total}
                pageSize={5}
                pageCount={tableInfo.current && tableInfo.current}
                handlePageChange={handlePageChange}
                pages={tableInfo.pages && tableInfo.pages}
              />
            </div>
          )
          :
          null
      }
      {/* 表格数据超过一条才会显示展开和手气按钮 */}
      {
        tableInfo.total && tableInfo.total > 1 ?
          (
            <div className="foldTable-fold">
              {
                fold ?
                  (
                    <div onClick={handleTable} style={{ cursor: 'pointer' }}>
                      <Icon type="double-right" rotate={90} />
                      <span>展开</span>
                    </div>
                  )
                  :
                  (
                    <div onClick={handleTable} style={{ cursor: 'pointer' }}>
                      <Icon type="double-right" rotate={-90} />
                      <span>收起</span>
                    </div>
                  )
              }
            </div>
          )
          :
          null
      }
    </div>
  )
}